<!--
 * @Author: Dorange.Wang
 * @Date: 2021-04-02 16:09:55
 * @LastEditors: your name
 * @LastEditTime: 2021-06-16 10:51:13
 * @Description: file content
-->

<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="600px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span v-if="isCopy">{{ "复制状态机" }}</span>
        <span v-else-if="isVersion">{{ "新建版本" }}</span>
        <span v-else-if="isDesc">{{ "版本描述" }}</span>
        <span v-else-if="isNew">{{ "新建状态机" }}</span>
        <span v-else>{{ "编辑状态机" }}</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>

    <el-form class="pl30 pr30" :model="formData" ref="form" label-width="120px">
      <el-form-item
        label="状态机key"
        prop="key"
        :rules="[
          { required: true, message: '状态机key不能为空', trigger: 'change' },
          {
            pattern: COMMON_CODE_64I_REG.pattern,
            message: '请输入有效的状态机key',
            trigger: 'change',
          },
        ]"
      >
        <template
          slot="label"
        >状态机key
          <el-tooltip
            popper-class="custom-popper"
            :content="COMMON_CODE_64I_REG.message"
            placement="top"
          >
            <i class="el-icon-question" />
          </el-tooltip>
        </template>
        <el-input
          :disabled="!isNew"
          v-model="formData.key"
          style="width: 400px"
          placeholder="请输入状态机key"
          :maxlength="64"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item
        label="状态机名称"
        prop="name"
        :rules="[
          { required: true, message: '状态机名称不能为空', trigger: 'change' },
        ]"
      >
        <el-input
          :disabled="isVersion || isDesc"
          v-model="formData.name"
          style="width: 400px"
          placeholder="请输入状态机名称"
          :maxlength="64"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item v-if="isDesc" label="版本号" prop="version">
        <el-input
          disabled
          :value="formData.version | version"
          style="width: 400px"
        ></el-input>
      </el-form-item>

      <el-form-item v-if="isVersion" label="基于此版本" prop="version">
        <el-select
          style="width: 400px"
          v-model="formData.sourceId"
          placeholder="请选择版本"
          clearable
        >
          <el-option
            v-for="ver in versionList"
            :key="ver.id"
            :value="ver.id"
            :label="ver.versionText"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态机描述">
        <el-input
          type="textarea"
          v-model="formData.description"
          style="width: 400px"
          placeholder="请输入状态机描述"
          :maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { MODULE_TYPE_ENUM } from '@/utils/enum'
import { COMMON_CODE_64I_REG } from '@/utils/reg'
import { postHmstatemodel,putHmstatemodel,postHmstatemodelCopy,postHmstatemodelMakeversion,getHmstatemodelHistory } from '@/apis/paas/HmStateModelController.js'

export default {
  name: 'ProcessForm',
  data () {
    return {
      showVisible: false,
      isCopy: false, // 复制状态机
      isVersion: false, // 新建版本
      versionList: [], // 版本列表
      isDesc: false, // 版本描述
      formData: {},
      MODULE_TYPE_ENUM,
      COMMON_CODE_64I_REG,
      callback: () => {},
      validator: (rule, value, callback) => {
        callback()
      }
    }
  },

  computed: {
    isNew () {
      return !this.formData.id
    }
  },

  watch: {
    showVisible (newVal) {
      if (!newVal) {
        this.isCopy = false
        this.isVersion = false
        this.isDesc = false
      }
    }
  },

  methods: {
    addForm (record = {}) {
      this.formData = { ...record }
      return this.showModel()
    },

    editForm (record) {
      this.formData = { ...record }
      return this.showModel()
    },

    copyForm (record) {
      this.isCopy = true
      this.formData = { ...record }
      return this.showModel()
    },

    verForm (record) {
      this.isVersion = true
      this.formData = { ...record }
      this.loadProcessHistory()
      return this.showModel()
    },

    loadProcessHistory () {
      getHmstatemodelHistory({
        key: this.formData.key
      }).then((res) => {
        this.versionList = res.map((item) => {
          item.versionText =
            this.$options.filters['version'](item.version) +
            `${item.published ? '【已发布】' : ''}` +
            `${item.activated ? '【已激活】' : ''}`
          return item
        })
      })
    },

    descForm (record) {
      this.isDesc = true
      this.formData = { ...record }
      return this.showModel()
    },

    showModel () {
      this.showVisible = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      return {
        then: (callback) => {
          if (typeof callback === 'function') {
            this.callback = callback
          }
        }
      }
    },
    async submit () {
      try {
        await this.$refs.form.validate()
        const { id, key, folderId, name, description, sourceId } =
          this.formData
        const { isCopy, isVersion, isDesc } = this
        let params = {}
        let request = null
        if (isCopy) {
          params = { key, name, description, sourceId }
          request = postHmstatemodelCopy
        } else if (isVersion) {
          params = {
            sourceId,
            description,
            sourceKey: key
          }
          request = postHmstatemodelMakeversion
        } else if (isDesc) {
          params = { id, name, description }
          request = putHmstatemodel
        } else if (this.isNew) {
          params = { key, folderId, name, description }
          request = postHmstatemodel
        } else {
          params = { id, name, description }
          request = putHmstatemodel
        }
        for (const key in params) {
          params[key] =
            typeof params[key] === 'string' ? params[key].trim() : params[key]
        }
        request(params).then((res) => {
          this.showVisible = false
          if (this.isNew) {
            this.callback({
              id: res,
              key,
              name
            })
          } else {
            this.callback()
          }
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
